import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader, VideoList, WhitePage } from '../../components';
import { ActionTypes } from '../../constants'

class MyWork extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    componentDidMount() {
        this._fetchMyWorks()
    }

    // render part
    render() {
        console.log('mywork', this.props);
        
        return (
            <SafeAreaView style={{flex:1}}>
                <NavigationHeader
                    title='我的作品'
                    navigation={this.props.navigation}
                    rightButton={this._renderRightButton()}
                />
                <View style={{
                    flex: 1,
                    backgroundColor: '#fff'
                }}>
                    {this._renderVideoList()}
                </View>
            </SafeAreaView>
        )
    }

    _renderRightButton() {
        return (
            <TouchableOpacity
                style={{ width: '100%', justifyContent: 'flex-end' }}
                onPress={() => {
                    this.props.navigation.navigate('VideoAdd')
                }}
            >
                <Text style={{
                    textAlign: 'right'
                }}>添加</Text>
            </TouchableOpacity>
        )
    }

    _renderVideoList() {
        if (this.props.userVideoList.length == 0) return <WhitePage />
        return (
            <VideoList
                data={this.props.userVideoList}
            />
        )
    }
    
    _fetchMyWorks() {
        const { id } = this.props.user;
        const data  = {
            uid: id
        }
        const callBack = this._finishLoad.bind(this)
        actionUtil(ActionTypes.API_GET_USER_VIDEO_LIST_BY_USER, {data, callBack})
    }

    _finishLoad() {
        // load finish
    }
}

const styles = StyleSheet.create({

})

export default connect(state => ({
    user: state.user.user,
    userVideoList: state.videoList.userVideoList
})
)(MyWork)